<template>
  <div>
    <!-- 头部导航 -->
    <div class="top">
      <!-- <div @click="tocart"><van-icon name="arrow-left" /></div>
            <div>地址管理</div> -->
      <van-nav-bar
        title="地址管理"
        left-text=""
        left-arrow
        @click-left="tocart"
      />
    </div>
    <!-- 用户地址 -->
    <div class="addrlist">
      <van-address-list
        :list="addresses"
        default-tag-text="默认"
        :switchable="false"
        @add="onAdd"
        @edit="onEdit"
      >
        <!-- 这里的item代表当前这一个地址的完整内容 -->
        <!-- 删除图标 -->
        <template #item-bottom="item">
          <van-button
            class="removeAddr"
            icon="delete-o"
            type="default"
            @click="removeAddr(item.id)"
          ></van-button>
        </template>
      </van-address-list>
    </div>

    <!-- 弹出的对话框 -->
    <van-dialog
      v-model="show"
      :title="title"
      :show-confirm-button="false"
      :close-on-click-overlay="true"
      :show-cancel-button="false"
    >
    <!-- 地址编辑 -->
      <van-address-edit
        :area-list="areaList"
        :address-info="AddressInfo"
        show-postal
        show-set-default
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        @save="onSave"
      />
    </van-dialog>
  </div>
</template>

<script>
import Vue from "vue";
import { AddressList } from "vant";
import { Dialog } from "vant";
import { AddressEdit } from "vant";
import { areaList } from "@vant/area-data";
import { saveAddr, getAddrs, delAddr } from "@/request";
import { Toast } from "vant";
import { getCookie } from "@/utils/cookie";
import { Button } from "vant";
import { Icon } from "vant";
import { NavBar } from "vant";

Vue.use(NavBar);

Vue.use(Icon);

Vue.use(Button);
Vue.use(Toast);
Vue.use(AddressEdit);
// 全局注册
Vue.use(Dialog);
Vue.use(AddressList);
export default {
  data() {
    return {
      addresses: [],
      show: false,
      areaList: areaList,
      AddressInfo: {},
      title: "添加地址",
    };
  },
  created() {
    this.getAddresses();
  },
  methods: {
    getAddresses() {
      getAddrs().then((data) => {
        // console.log(data);
        this.addresses = data.data.map((item) => {
          item.address =
            item.province + item.city + item.county + item.addressDetail;
          return item;
        });
      });
    },
    onAdd() {
      // 让弹窗显示
      this.show = true;
      // 更换标题
      this.title = "地址添加";
    },
    onEdit(item) {
      // 这里的item表示我们要修改的这个地址的完整数据
      // 更换标题
      this.title = "地址编辑";
      // 让弹窗显示
      this.show = true;
      // console.log(item);
      this.AddressInfo = item;
    },
    // 点击地址保存按钮后会执行的函数
    onSave(content) {
      // 这里的content参数，就是在表单中输入的数据
      // console.log(content);
      // 将当前用户名保存在数据中
      var username = getCookie("username");
      content.username = username;
      saveAddr(content).then((data) => {
        // 给用户提示
        Toast.success(data.msg);
        // 让弹窗隐藏
        this.show = false;
        // 清空数据
        this.AddressInfo = {};
        // 重新获取地址显示
        this.getAddresses();
      });
    },
   
    removeAddr(id) {
      // 询问用户是否真的要删除
      Dialog.confirm({
        title: "删除地址",
        message: "你确认要删除吗？",
      })
        .then(() => {
          // 发起删除请求
          delAddr(id).then((data) => {
            if (data.code === 1) {
              var _this = this;
              Toast.success({
                message: data.msg,
                onClose() {
                  _this.getAddresses();
                },
              });
            }
          });
        })
        .catch(() => {
          Toast.success("已取消");
        });
    },
     // 点击返回，返回购物车页面
    tocart() {
      this.$router.push("/cart");
    },
  },
};
</script>

<style scoped>
/* 顶部样式 */
.top {
  padding: 10px 0px;
  /* border-bottom: 2px solid #ccc; */
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.top > div:first-child {
  margin-right: 20px;
}
.top > div:last-child {
  flex: 1;
  text-align: center;
}
.van-nav-bar .van-icon {
  color: #c8c9cc;
}
/* 地址列表样式 */
.van-address-item {
  position: relative;
}
/* 删除图标 */
.van-button.removeAddr {
  border: hidden;
  position: absolute;
  right: -4px;
  top: 53%;
  transform: translateY(-50%);
}
/* 编辑图标 */
.van-address-item__edit {
  position: absolute;
  top: 51%;
  right: 33px;
  color: #969799;
  font-size: 20px;
}


.van-button--danger{
    background-image:linear-gradient(to right, #ff9000, #ff5000);
}

</style>
